<template>
  <view class="improving_container app_container_page">
    <view class="title"> 推荐视频 </view>
    <view class="improvingList">
      <view class="improvingVideoList">
        <scroll-view class="scroll-view_H" :scroll-x="true">
          <view class="improvingVideoItem" v-for="video in reVideoList" :key="video.id" :style="{ backgroundImage: 'url(' + video.img + ')' }" @click="toVideoDetail(video)">
            <view class="improvingVideoItemText">
              <view>{{ video.title }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="line"> </view>
      <view class="improvingVideoTyleList">
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view class="improvingVideoTyleListItem" v-for="item in videoTypeList" :key="item.id" :style="{ backgroundImage: 'url(' + item.img + ')' }" @click="changevideoType(item.id, item.name)">
            <view class="improvingVideoTyleListItemTitle"
              ><view>{{ item.name }}</view></view
            >
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="improvingVideoListBox">
      <view class="tab">
        <view class="tab1" :class="code == 0 ? 'active' : ''" @click="activeChange(0)">视频列表</view>
        <view :class="code == 1 ? 'active' : ''" @click="activeChange(1)">增强视频</view>
      </view>
      <pullRefreshView v-show="code === 0" class="pullRefreshVideoView" ref="pullRefreshVideoView" :fetchFn="fetchVideoList">
        <template v-slot:default="{ list }">
          <appVideoListCard v-for="video in list" :key="video.id" :video="video" @VIDEOLIST_CARD_CLICK="toVideoDetail" />
        </template>
      </pullRefreshView>
      <pullRefreshView v-show="code === 1" class="pullRefreshEnhanceVideoView" ref="pullRefreshEnhanceVideoView" :fetchFn="fetchEnhanceVideoList">
        <template v-slot:default="{ list }">
          <appVideoListCard v-for="video in list" :key="video.id" :video="video" @VIDEOLIST_CARD_CLICK="toVideoDetail" />
        </template>
      </pullRefreshView>
    </view>
  </view>
</template>

<script>
import pullRefreshView from '@/components/app/pull-refresh-view.vue'
import appVideoListCard from '@/components/app/app_videoList_card'
import { recommendVideoList, getVideoTypeList, getTagVideoList } from '@/api/home'

export default {
  components: {
    pullRefreshView,
    appVideoListCard
  },
  data() {
    return {
      reVideoList: [],
      videoTypeList: [],
      code: 0,
      tags: ''
    }
  },
  methods: {
    activeChange(val) {
      this.code = val
    },
    changevideoType(val, name) {
      if (name === '全部') {
        this.tags = ''
      } else {
        this.tags = val
      }
      this.$refs[this.code === 0 ? 'pullRefreshVideoView' : 'pullRefreshEnhanceVideoView'].fetchList(true).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    fetchVideoList(params) {
      return getTagVideoList({
        ...params,
        tags: this.$parent.tags,
        isEnhanced: 0
      })
    },
    fetchEnhanceVideoList(params) {
      return getTagVideoList({
        ...params,
        tags: this.$parent.tags,
        isEnhanced: 1
      })
    },
    toVideoDetail(val) {
      uni.navigateTo({
        url: '/pages/videoDetail/index?id=' + val.id
      })
    }
  },
  onLoad() {
    recommendVideoList({
      pageSize: 10,
      pageNum: 1
    })
      .then((res) => {
        this.reVideoList = res.data.list
      })
      .catch((err) => {
        console.log(err)
      })
    getVideoTypeList()
      .then((res) => {
        this.videoTypeList = res.data
      })
      .catch((err) => {
        console.log(err)
      })
  },
  onPullDownRefresh() {
    this.$refs[this.code === 0 ? 'pullRefreshVideoView' : 'pullRefreshEnhanceVideoView'].fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs[this.code === 0 ? 'pullRefreshVideoView' : 'pullRefreshEnhanceVideoView'].fetchList()
  }
}
</script>

<style lang="scss">
.improving_container {
  .title {
    width: 100%;
    height: 100rpx;
    padding-left: 31rpx;
    line-height: 100rpx;
    font-size: 40rpx;
    background-color: #ffffff;
  }
  .tab {
    padding-left: 0;
  }
  .improvingList {
    width: 100%;
    height: 500rpx;
    background-image: url('#{$BASEURL}/bg-no-wave.png');
    background-size: contain;
    .improvingVideoList {
      height: 300rpx;
      padding: 30rpx 0;
      .scroll-view_H {
        white-space: nowrap;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
        color: #fefefe;
        border-radius: 20rpx;

        .improvingVideoItem {
          display: inline-block;
          margin-right: 30rpx;
          border-radius: 20rpx;
          width: 400rpx;
          height: 240rpx;
          position: relative;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          &:nth-last-child(1) {
            margin-right: 0;
          }
          .improvingVideoItemText {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 400rpx;
            height: 240rpx;
            border-radius: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(225, 225, 225, 0.2);
            view {
              // height: 100%;
              line-height: 40rpx;
              white-space: normal !important;
              width: 260rpx;
              @include ellipsis4line(2);
            }
          }
        }
      }
    }

    .line {
      width: 100%;
      height: 1rpx;
      background: #cccccc;
    }

    .improvingVideoTyleList {
      height: 200rpx;
      padding: 32rpx 0 28rpx 0;

      .scroll-view_H {
        white-space: nowrap;

        .improvingVideoTyleListItem {
          width: 140rpx;
          height: 140rpx;
          box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.1);
          border-radius: 20rpx;
          display: inline-block;
          margin-left: 30rpx;
          background-repeat: no-repeat;
          background-size: cover;
          .improvingVideoTyleListItemTitle {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            view {
              width: 120rpx;
              color: #ffffff;
              font-size: 30rpx;
              text-align: center;
              @include text-ellipsis();
            }
          }
          &:nth-last-child(1) {
            margin-right: 30rpx;
          }
        }
      }
    }
  }
  .improvingVideoListBox {
    padding: 0 30rpx;
    app-video-list-card ~ app-video-list-card {
      margin-top: 30rpx;
    }
  }
}
</style>
